<template>

  <!-- 创建一本书 -->
  <div class="book">
    <!-- 前封面 -->


    <!-- 创建第一页 -->
    <div class="page book_page" style="--page-index: 2;">
      <!-- 第一页的前半页 -->
      <div class="page_half page_half--front">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">1</div>
      </div>
      <!-- 第一页的后半页 -->
      <div class="page_half page_half--back">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">2</div>
      </div>
    </div>

    <div class="page book_page" style="--page-index: 3;">
      <!-- 第一页的前半页 -->
      <div class="page_half page_half--front">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">1</div>
      </div>
      <!-- 第一页的后半页 -->
      <div class="page_half page_half--back">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">2</div>
      </div>
    </div>

    <div class="page book_page" style="--page-index: 4;">
      <!-- 第一页的前半页 -->
      <div class="page_half page_half--front" >
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">1</div>
      </div>
      <!-- 第一页的后半页 -->
      <div class="page_half page_half--back">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">2</div>
      </div>
    </div>

    <div class="page book_page" style="--page-index: 5;">
      <!-- 第一页的前半页 -->
      <div class="page_half page_half--front">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">1</div>
      </div>
      <!-- 第一页的后半页 -->
      <div class="page_half page_half--back">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">2</div>
      </div>
    </div>

    <div class="page book_page" style="--page-index: 6;">
      <!-- 第一页的前半页 -->
      <div class="page_half page_half--front" >
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">1</div>
      </div>
      <!-- 第一页的后半页 -->
      <div class="page_half page_half--back">
        <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/605876/Cubes-sketch.svg">
        <div class="page_number">2</div>
      </div>
    </div>

     <!-- 后封面 -->

  </div>

</template>


<script lang="ts">
import { gsap } from 'gsap'
import { ScrollTrigger } from "gsap/ScrollTrigger";



export default defineComponent ({
  setup() {

    const data = reactive({
      timer: ref()
    })

    gsap.registerPlugin(ScrollTrigger)
    const tween = gsap.timeline({
      delay: 0.8,
    })

    const debounce = (func: { (): void; apply?: any; }, delay: number | undefined) => {
      data.timer = null;
      return () => {
          clearTimeout(data.timer);
          data.timer = setTimeout(() => {
              func.apply(this, arguments);
          }, delay);
      };
    }

    
    const scrollBook = async() => {
      const pages = document.querySelectorAll('.book_page')
      pages.forEach((page, index) => {
        tween.set(page, {})
        if(index == 11) return false
        tween.to(page, {
          rotateY: `-=${180 - index / 2}`,
          scrollTrigger: {
            scrub: true,
            start:() => (index) * (window.innerHeight),
            end: () => (index + 1) * (window.innerHeight),
          }
        })
      })
    }

    const scrollBookdebounce = debounce(scrollBook, 500)


    onMounted(() => {
      window.addEventListener('scroll', scrollBookdebounce)
    })


    return{
      ...toRefs(data),
      scrollBookdebounce
    }

  }
})



</script>



<style scoped>
* {
  box-sizing: border-box;
}


:root {
  --page-count: 20;
  --page-scroll: 60;
  --cover: #1a1a1a;
  --bg: #4d4d4d;
  --insert: #d9d9d9;
  --page: #e6e6e6;
  --underline: rgba(64,64,64, 0.4)
}

body {
  width: 100vmin;
  height: calc(var(--page-count) * var(--page-scroll) * 1vh);
  background: var(--bg);
  overflow-x: hidden;
}

.book {
  height: 15vmin;
  width: 10vmin;
  position: fixed;
  top: 45%;
  left: 17%;
  transform: translate(-50%, -50%);
  transform-style: preserve-3d;
  perspective: 1200px;
}

.page {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.book_page {
  position: absolute;
  width: 94%;
  height: 94%;
  left: 2%;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgb(183, 226, 243);
  opacity: 0.5;
  border-radius: 0 5% 5% 0;
  z-index: calc(((var(--page-count) + 2) * var(--page-index)) * 2);
  transform-origin:  0% 50%;
}



/* .book_page:nth-child(1){
  transform: rotateY(-180deg);
} */

.book_cover {
  height: 100%;
  width: 100%;
  left: 0;
  background: #1a1a1a;
}


.code {
  color: #ffff;

}

.page_half {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(calc(var(--rotation) * 1deg));
  clip-path: inset(0 0.5% 0 0.5% );

}

/* 普通纸的背景 */
.book_page:not(.book_cover) .page_half {
  background: repeating-linear-gradient(
    0deg,
    transparent 0 1rem, var(--underline) 1rem calc(1rem + 1px),
    transparent 0 calc(1rem + 1px)) 0 1rem/100% 100% no-repeat var(--page);
}

/* 翻页后看不见前面的内容 */

.page_half--front {
  --rotation: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 0 5% 5% 0;
}

.page_half--back{
  --rotation: 180;
  border-radius: 5% 0 0 5%;
}

.book_insert{
  content: "";
  position: absolute;
  width: 94%;
  height: 94%;
  background: var(--insert);
  border-radius: 5% 0 0 5%;
  right: -1rem;
}

.page .page_number {
  position: absolute;
  color: #888888;
  bottom: 1rem;
  font-style: 1vmin;
}

.page_half--front .page_number {
  right: 1rem;
}

.page_half--back .page_number {
  left: 1rem;
}


</style>